export const WaterPolo = () => {
    return `


    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  import "echarts-liquidfill";
const value = 0.5;
  const state = reactive({
    option:  {
   backgroundColor: '#0F224C', //背景色
   series: [
      {
         name: '预估量',
         type: 'liquidFill',
         radius: '60%',
         center: ['50%', '50%'],
         backgroundStyle: {
            color: 'transparent',
         },
         data: [value, value],
         amplitude: 20, //水波振幅
         label: {
            //标签设置
            position: ['50%', '45%'],
            formatter: '50%', //显示文本,
            textStyle: {
               fontSize: '52px', //文本字号,
               color: '#fff',
            },
         },
         outline: {
            borderDistance: 3,
            itemStyle: {
               borderWidth: 2,
               borderColor: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#007DFF',
                     },
                     {
                        offset: 0.6,
                        color: 'rgba(45, 67, 114, 1)',
                     },
                     {
                        offset: 1,
                        color: 'rgba(45, 67, 114, 1)',
                     },
                  ],
                  globalCoord: false,
               },
            },
         },
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
               {
                  offset: 1,
                  color: 'rgba(31, 222, 225, 1)',
               },
               {
                  offset: 0.85,
                  color: '#007DFF80',
               },
               {
                  offset: 0.35,
                  color: '#004a99',
               },
               {
                  offset: 0,
                  color: 'rgba(31, 222, 225, 1)',
               },
            ]),
         },
      },
   ],
}
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
    
  
    
    `;
  };
  